﻿@model FoodBank.Core.Models.Product
<div id="nutri-container">
    <div class="nutri-fact">
        <div class="nutri-title">
            <span>Energie</span>
        </div>
        <div class="nutri-value">
            @Model.Calories
            <label>Kcal</label>
        </div>
        <div class="nutri-pct">
            @Math.Round((Model.Calories/2000)*100, MidpointRounding.ToEven)
            <label>%</label>
        </div>
    </div>
@if (Model.Sugar.HasValue)
{
        <div class="nutri-fact">
            <div class="nutri-title">
                <span>Suikers</span>
            </div>
            <div class="nutri-value">
                @Model.Sugar
                <label>g</label>
            </div>
            <div class="nutri-pct">
                @Math.Round((Model.Sugar.GetValueOrDefault()/40)*100, MidpointRounding.ToEven)
                <label>%</label>
            </div>
        </div>
}
    <div class="nutri-fact">
        <div class="nutri-title">
            <span>Vetten</span>
        </div>
        <div class="nutri-value">
            @Model.Fat
            <label>g</label>
        </div>
        <div class="nutri-pct">
            @Math.Round((Model.Fat/65)*100, MidpointRounding.ToEven)
            <label>%</label>
        </div>
    </div>
@if (Model.SaturatedFat.HasValue) 
{
        <div class="nutri-fact">
            <div class="nutri-title">
                <span>Verzadigde Vet</span>
            </div>
            <div class="nutri-value">
                @Model.SaturatedFat
                <label>g</label>
            </div>
            <div class="nutri-pct">
                @Math.Round((Model.SaturatedFat.GetValueOrDefault()/20)*100, MidpointRounding.ToEven)
                <label>%</label>
            </div>
        </div>
}
@if (Model.Salt.HasValue)
{
    <div class="nutri-fact">
        <div class="nutri-title">
            <span>Zout</span>
        </div>
        <div class="nutri-value">
            @Model.Salt
            <label>g</label>
        </div>
        <div class="nutri-pct">
            @Math.Round((Model.Salt.GetValueOrDefault()/2.4)*100, MidpointRounding.ToEven)
            <label>%</label>
        </div>
    </div>
}
    <div class="nutri-fact">
        <div class="nutri-title">
            <span>Proteïnen</span>
        </div>
        <div class="nutri-value">
            @Model.Proteins
            <label>g</label>
        </div>
        <div class="nutri-pct">
            @Math.Round((Model.Proteins/50)*100, MidpointRounding.ToEven)
            <label>%</label>
        </div>
    </div>
    <div class="nutri-fact">
        <div class="nutri-title">
            <span>Koolhydraten</span>
        </div>
        <div class="nutri-value">
            @Model.Carbohydrates
            <label>g</label>
        </div>
        <div class="nutri-pct">
            @Math.Round((Model.Carbohydrates/300)*100, MidpointRounding.ToEven)
            <label>%</label>
        </div>
    </div>
</div>
<script type="text/javascript">

    $(document).ready(function () {

        $('.nutri-fact').each(function () {

            var textSpan = $(this, 'div:first').find('span:first');
            var containerWidth = $(this).width() - 6;
            var textWidth = textSpan.width();

            if (textWidth >= containerWidth) {

                var fontSize = parseInt(textSpan.css("fontSize"), 10);
                var multiplier = containerWidth / textWidth;
                var newSize = (fontSize * (multiplier - 0.1));

                textSpan.css('font-size', newSize);
            }

        });
    });
    
</script>
